{% extends 'base.html' %}

{% block title %}关键词提取{% endblock %}

{% block content %}
    <h1>关键词提取</h1>
    <p>请输入一段中文文本：</p>
    <form method="post" style="display: flex; flex-direction: column;">
        {% csrf_token %}
        <textarea name="text" style="width: 100%; height: 150px;">{{ user_input }}</textarea>
        
        <div style="display: flex; align-items: center; margin-top: 10px;">
            <span style="margin-right: 10px;">提取关键词数量</span>
            <input type="number" name="num" value="{{ num }}" min="1" style="width: 50px; margin-right: auto;" />
            <div class="button-container">
                <input type="submit" value="关键词提取" class="styled-button">
            </div>
        </div>
    </form>

    {% if show_result %}
        <div>
            <h2>关键词提取结果</h2>
            <ul class="keyword-list">
                {% for keyword in keywords %}
                    <li class="keyword-item">{{ keyword }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    <style>
        textarea {
            width: 98%; /* 设置宽度为98% */
            height: 150px; /* 设置高度为150px */
            font-size: 16px; /* 设置字体大小 */
            padding: 10px; /* 内边距 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 4px; /* 边框圆角 */
            resize: vertical; /* 允许垂直调整大小 */
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }

        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        input[type="number"] {
            width: 50px;
        }

        .keyword-list {
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
        }

        .keyword-item {
            background-color: #e0e0e0; /* 背景 */
            border-radius: 4px;        /* 圆角 */
            padding: 5px;              /* 内边距 */
            margin: 2px;               /* 外边距 */
            display: inline-block;      /* 垂直排列 */
            transition: transform 0.2s; /* 平滑过渡效果 */
            font-weight: bold;          /* 加粗字体 */
            color: #5e35b1;            /* 字体颜色 */
        }

        .keyword-item:hover {
            transform: scale(1.1);      /* 悬停时放大 */
            background-color: #d0e7ff;  /* 悬停时改变背景色 */
        }

    </style>
{% endblock %}

